<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小兔鲜儿</title>
    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="./iconfont/iconfont.css">
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/commonss.css">
    <link rel="stylesheet" href="./css/indexs.css">
</head>

<body>
    <div class="shortcut">
        <div class="container">
            <div class="shortcut-nav">
                <a href="#">请先登录</a>
                <span>|</span>
                <a href="#">免费注册</a>
                <span>|</span>
                <a href="#">我的订单</a>
                <span>|</span>
                <a href="#">会员中心</a>
                <span>|</span>
                <a href="#">帮助中心</a>
                <span>|</span>
                <a href="#">在线客服</a>
                <span>|</span>
                <a href="#">
                    <i class="iconfont icon-mobile-phone"></i>
                    手机版
                </a>
            </div>
        </div>
    </div>

    <div class="header container">
        <div class="logo">
            <h1>
                <a href="#">小兔鲜儿</a>
            </h1>
        </div>
        <div class="nav">
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">生鲜</a></li>
                <li><a href="#">美食</a></li>
                <li><a href="#">餐厨</a></li>
                <li><a href="#">电器</a></li>
                <li><a href="#">居家</a></li>
                <li><a href="#">洗护</a></li>
                <li><a href="#">孕婴</a></li>
                <li><a href="#">服装</a></li>
            </ul>
        </div>
        <div class="search">
            <i class="iconfont icon-search"></i>
            <input type="text" placeholder="搜一搜">
        </div>
        <div class="cart">
            <i class="iconfont icon-cart-full"></i>
            <span>2222</span>
        </div>
    </div>

    <div class="banner">
        <div class="container">
            <!-- 轮播图 -->
            <ul class="pic">
                <li>
                    <a href="#"><img src="./uploads/banner1.png" alt=""></a>
                </li>
                <li>
                    <a href="#"><img src="./uploads/banner1.png" alt=""></a>
                </li>
            </ul>
            <!-- 侧边栏 -->
            <div class="aside">
                <ul>
                    <li>
                        <a href="#"><span>生鲜</span> 水果蔬菜</a>
                        <i class="iconfont icon-arrow-right-bold"></i>
                    </li>
                    <li>
                        <a href="#"><span>美食</span> 面点干果</a>
                        <i class="iconfont icon-arrow-right-bold"></i>
                    </li>
                    <li>
                        <a href="#"><span>餐厨</span> 数码产品</a>
                        <i class="iconfont icon-arrow-right-bold"></i>
                    </li>
                    <li>
                        <a href="#"><span>电器</span> 床品四件套被枕</a>
                        <i class="iconfont icon-arrow-right-bold"></i>
                    </li>
                    <li>
                        <a href="#"><span>居家</span> 奶粉玩具辅食</a>
                        <i class="iconfont icon-arrow-right-bold"></i>
                    </li>
                    <li>
                        <a href="#"><span>洗护</span> 洗发洗护美妆</a>
                        <i class="iconfont icon-arrow-right-bold"></i>
                    </li>
                    <li>
                        <a href="#"><span>孕婴</span> 奶粉玩具</a>
                        <i class="iconfont icon-arrow-right-bold"></i>
                    </li>
                    <li>
                        <a href="#"><span>服饰</span> 女装男装</a>
                        <i class="iconfont icon-arrow-right-bold"></i>
                    </li>
                    <li>
                        <a href="#"><span>杂货</span> 户外图书</a>
                        <i class="iconfont icon-arrow-right-bold"></i>
                    </li>
                    <li>
                        <a href="#"><span>品牌</span> 品牌制造</a>
                        <i class="iconfont icon-arrow-right-bold"></i>
                    </li>
                </ul>
            </div>
            <!-- 轮播图指示器 -->
            <ol class="indicator">
                <li class="active">
                    <a href="#"></a>
                </li>
                <li>
                    <a href="#"></a>
                </li>
                <li>
                    <a href="#"></a>
                </li>
            </ol>
        </div>
    </div>

    <div class="new-goods container">
        <div class="title">
            <h3>
                新鲜好物
                <span>新鲜出炉 品质靠谱</span>
            </h3>
            <a href="#" class="all">
                查看全部
                <i class="iconfont icon-arrow-right-bold"></i>
            </a>
        </div>
        <div class="goods-list">
            <ul>
                <li>
                    <a href="#">
                        <img src="./uploads/goods1.png" alt="">
                        <h4>KN95级莫兰迪色防护口罩</h4>
                        <p><span>¥</span>79</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./uploads/goods2.png" alt="">
                        <h4>KN95级莫兰迪色防护口罩</h4>
                        <p><span>¥</span>79</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./uploads/goods3.png" alt="">
                        <h4>KN95级莫兰迪色防护口罩</h4>
                        <p><span>¥</span>79</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./uploads/goods4.png" alt="">
                        <h4>KN95级莫兰迪色防护口罩</h4>
                        <p><span>¥</span>79</p>
                    </a>
                </li>
            </ul>
        </div>
    </div>

    <div class="fresh-goods container">
        <div class="title">
            <h3>
                生鲜
            </h3>
            <div class="right">
                <ul class="tabs">
                    <li><a href="#">热门</a></li>
                    <li><a href="#">蔬菜</a></li>
                    <li><a href="#">肉禽蛋</a></li>
                    <li><a href="#">水果</a></li>
                    <li><a href="#">海鲜</a></li>
                    <li><a href="#">零食</a></li>
                    <li><a href="#">饮料</a></li>
                </ul>
                <a href="#" class="all">
                    查看全部
                    <i class="iconfont icon-arrow-right-bold"></i>
                </a>
            </div>
        </div>

        <div class="fresh-list">
            <div class="left">
                <img src="./uploads/fresh_left.png" alt="">
            </div>
            <div class="fresh-item">
                <ul>
                    <li>
                        <a href="#">
                            <div class="pic">
                                <img src="./uploads/fresh1.png" alt="">
                            </div>
                            <h4>双味千层，手抓饼烤肉组合</h4>
                            <p>240g/袋 4片装</p>
                            <p>加热即食</p>
                            <p class="money"><span>¥</span>89.99</p>
                        </a>
                        <div class="show">
                            <h4>找相似</h4>
                            <p>发现更多宝贝 ></p>
                        </div>
                    </li>
                    <li>
                        <a href="#">
                            <div class="pic">
                                <img src="./uploads/fresh2.png" alt="">
                            </div>
                            <h4>双味千层，手抓饼烤肉组合</h4>
                            <p>240g/袋 4片装</p>
                            <p>加热即食</p>
                            <p class="money"><span>¥</span>89.99</p>
                        </a>
                        <div class="show">
                            <h4>找相似</h4>
                            <p>发现更多宝贝 ></p>
                        </div>
                    </li>
                    <li>
                        <a href="#">
                            <div class="pic">
                                <img src="./uploads/fresh3.png" alt="">
                            </div>
                            <h4>双味千层，手抓饼烤肉组合</h4>
                            <p>240g/袋 4片装</p>
                            <p>加热即食</p>
                            <p class="money"><span>¥</span>89.99</p>
                        </a>
                        <div class="show">
                            <h4>找相似</h4>
                            <p>发现更多宝贝 ></p>
                        </div>
                    </li>
                    <li>
                        <a href="#">
                            <div class="pic">
                                <img src="./uploads/fresh4.png" alt="">
                            </div>
                            <h4>双味千层，手抓饼烤肉组合</h4>
                            <p>240g/袋 4片装</p>
                            <p>加热即食</p>
                            <p class="money"><span>¥</span>89.99</p>
                        </a>
                        <div class="show">
                            <h4>找相似</h4>
                            <p>发现更多宝贝 ></p>
                        </div>
                    </li>
                    <li>
                        <a href="#">
                            <div class="pic">
                                <img src="./uploads/fresh5.png" alt="">
                            </div>
                            <h4>双味千层，手抓饼烤肉组合</h4>
                            <p>240g/袋 4片装</p>
                            <p>加热即食</p>
                            <p class="money"><span>¥</span>89.99</p>
                        </a>
                        <div class="show">
                            <h4>找相似</h4>
                            <p>发现更多宝贝 ></p>
                        </div>
                    </li>
                    <li>
                        <a href="#">
                            <div class="pic">
                                <img src="./uploads/fresh6.png" alt="">
                            </div>
                            <h4>双味千层，手抓饼烤肉组合</h4>
                            <p>240g/袋 4片装</p>
                            <p>加热即食</p>
                            <p class="money"><span>¥</span>89.99</p>
                        </a>
                        <div class="show">
                            <h4>找相似</h4>
                            <p>发现更多宝贝 ></p>
                        </div>
                    </li>
                    <li>
                        <a href="#">
                            <div class="pic">
                                <img src="./uploads/fresh7.png" alt="">
                            </div>
                            <h4>双味千层，手抓饼烤肉组合</h4>
                            <p>240g/袋 4片装</p>
                            <p>加热即食</p>
                            <p class="money"><span>¥</span>89.99</p>
                        </a>
                        <div class="show">
                            <h4>找相似</h4>
                            <p>发现更多宝贝 ></p>
                        </div>
                    </li>
                    <li>
                        <a href="#">
                            <div class="pic">
                                <img src="./uploads/fresh8.png" alt="">
                            </div>
                            <h4>双味千层，手抓饼烤肉组合</h4>
                            <p>240g/袋 4片装</p>
                            <p>加热即食</p>
                            <p class="money"><span>¥</span>89.99</p>
                        </a>
                        <div class="show">
                            <h4>找相似</h4>
                            <p>发现更多宝贝 ></p>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <div class="topic container">
        <div class="title">
            <h3>
                最新专题
            </h3>

            <a href="#" class="all">
                查看全部
                <i class="iconfont icon-arrow-right-bold"></i>
            </a>

        </div>
        <div class="topic-list">
            <ul>
                <li>
                    <a href="#">
                        <div class="pic">
                            <img src="./uploads/topic1.png" alt="">
                            <div class="text">
                                <h4>吃这些美食才不算辜负自己</h4>
                                <p>餐厨起居洗护好物</p>
                                <div class="price">
                                    <span>¥</span> 29.9起
                                </div>
                            </div>
                        </div>
                        <div class="info">
                            <div class="left">
                                <span>
                                    <i class="iconfont icon-favorites-fill red"></i>
                                    1220
                                </span>
                                <span>
                                    <i class="iconfont icon-browse"></i>
                                    1800
                                </span>
                            </div>
                            <div class="right">
                                <span>
                                    <i class="iconfont icon-comment"></i>
                                    1220
                                </span>
                            </div>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <div class="pic">
                            <img src="./uploads/topic2.png" alt="">
                            <div class="text">
                                <h4>吃这些美食才不算辜负自己</h4>
                                <p>餐厨起居洗护好物</p>
                                <div class="price">
                                    <span>¥</span> 29.9起
                                </div>
                            </div>
                        </div>
                        <div class="info">
                            <div class="left">
                                <span>
                                    <i class="iconfont icon-favorites-fill red"></i>
                                    1220
                                </span>
                                <span>
                                    <i class="iconfont icon-browse"></i>
                                    1800
                                </span>
                            </div>
                            <div class="right">
                                <span>
                                    <i class="iconfont icon-comment"></i>
                                    1220
                                </span>
                            </div>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <div class="pic">
                            <img src="./uploads/topic3.png" alt="">
                            <div class="text">
                                <h4>吃这些美食才不算辜负自己</h4>
                                <p>餐厨起居洗护好物</p>
                                <div class="price">
                                    <span>¥</span> 29.9起
                                </div>
                            </div>
                        </div>
                        <div class="info">
                            <div class="left">
                                <span>
                                    <i class="iconfont icon-favorites-fill red"></i>
                                    1220
                                </span>
                                <span>
                                    <i class="iconfont icon-browse"></i>
                                    1800
                                </span>
                            </div>
                            <div class="right">
                                <span>
                                    <i class="iconfont icon-comment"></i>
                                    1220
                                </span>
                            </div>
                        </div>
                    </a>
                </li>
            </ul>
        </div>
    </div>

    <div class="footer">
        <div class="container">
            <!-- 服务 -->
            <div class="service">
                <a href="#">价格亲民</a>
                <a href="#">物流快捷</a>
                <a href="#">品质新鲜</a>
                <a href="#">售后无忧</a>
            </div>
            <!-- 帮助中心 -->
            <div class="help">
                <div class="left">
                    <dl>
                        <dt>购物指南</dt>
                        <dd><a href="#">购物流程</a></dd>
                        <dd><a href="#">支付方式</a></dd>
                        <dd><a href="#">售后规则</a></dd>
                    </dl>
                    <dl>
                        <dt>购物指南</dt>
                        <dd><a href="#">购物流程</a></dd>
                        <dd><a href="#">支付方式</a></dd>
                        <dd><a href="#">售后规则</a></dd>
                    </dl>
                    <dl>
                        <dt>购物指南</dt>
                        <dd><a href="#">购物流程</a></dd>
                        <dd><a href="#">支付方式</a></dd>
                        <dd><a href="#">售后规则</a></dd>
                    </dl>
                    <dl>
                        <dt>购物指南</dt>
                        <dd><a href="#">购物流程</a></dd>
                        <dd><a href="#">支付方式</a></dd>
                        <dd><a href="#">售后规则</a></dd>
                    </dl>
                    <dl>
                        <dt>购物指南</dt>
                        <dd>
                            <a href="#">
                                在线客服
                                <i class="iconfont icon-customer-service"></i>
                            </a>
                        </dd>
                        <dd>
                            <a href="#">
                                客服电话 400-0000-000
                            </a>
                        </dd>
                        <dd>
                            <a href="#">
                                工作时间 周一至周日 8:00-18:00
                            </a>
                        </dd>
                    </dl>
                </div>
                <div class="right">
                    <div class="code">
                        <img src="./images/wechat.png" alt="">
                        <p>微信公众号</p>
                    </div>
                    <div class="code">
                        <img src="./images/wechat.png" alt="">
                        <p>APP下载二维码</p>
                    </div>
                </div>
            </div>

            <!-- 版权 -->
            <div class="copyright">
                <p>
                    <a href="#">关于我们</a>
                    <span>|</span>
                    <a href="#">帮助中心</a>
                    <span>|</span>
                    <a href="#">售后服务</a>
                    <span>|</span>
                    <a href="#">配送与验收</a>
                    <span>|</span>
                    <a href="#">商务合作</a>
                    <span>|</span>
                    <a href="#">搜索推荐</a>
                    <span>|</span>
                    <a href="#">友情链接</a>
                </p>
                <p>CopyRight © 小兔鲜</p>
            </div>
        </div>
    </div>
</body>

</html>